<template>
  <!-- 查询行 -->
  <p class="You">
    <label for="">优惠编号</label>
    <input type="text" placeholder="全部订单" />
    <label for="">优惠名称</label>
    <input type="text" />
    <button>重置</button>
    <button>新增商品</button>
    <button>确定</button>
  </p>
  <el-row :gutter="20">
    <el-col :span="6" v-for="item in yhqList" :key="item.id">
      <div class="grid-content bg-purple">
        <div class="center">
          <p class="IconP">
            <img :src="item.img" alt="" />
            <span>{{ item.title }}}</span>
          </p>
          <p class="P2">{{ item.title2 }}</p>
          <button @click="handelPush">立即新建</button>
        </div>
      </div>
    </el-col>
  </el-row>

  <!-- 数据渲染 -->
  <div class="bottom2">
    <div class="title">
      <span class="num">优惠编号</span>
      <span class="user">优惠商品</span>
      <span class="city">优惠券</span>
      <span class="sq">活动开始时间</span>
      <span class="dz">活动结束时间</span>
      <span class="timer">优惠价格</span>
      <span class="siz">现价</span>
      <span>数量</span>
    </div>

    <!-- 准备渲染数据 -->
    <div v-for="item in AddList" :key="item.goodsId">
      <div
        class="title2"
        :class="Number(item.goodsId) % 2 !== 0 ? 'active1' : 'active2'"
      >
        <!--  优惠编号-->
        <span class="num">00{{ item.goodsId }}</span>
        <!-- 优惠商品 -->
        <span class="user">{{ item.goodsName }}</span>
        <span class="Mjq">
          <!-- 优惠券 -->
          <span v-if="item.goodsId % 2 == 0">满减券</span>
          <span v-else>折扣券</span>
        </span>

        <!-- 活动开始时间 -->
        <span class="time">{{ item.created }}</span>
        <!-- 活动结束时间 -->
        <span class="sq">{{ item.createdend }}</span>
        <!-- 优惠价格 -->
        <span class="siz">{{ item.goodsSale1 }}</span>
        <!-- 现价 -->
        <span class="XianJ">{{ item.goodsSale2 }}</span>
        <!-- 数量 -->
        <span class="num2">{{ item.goodsSale3 }}</span>
        <span>修改</span>
        <span>删除</span>
        <span>确认</span>
      </div>
    </div>
  </div>
  <div class="pageSmall">
    <el-pagination
      small
      background
      :total="50"
      class="mt-4"
      @current-change="fn"
    />
  </div>
</template>

<script lang="ts">
import Mock from "@/mock/Data";
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
export default {
  setup() {
    //新建优惠券数据

    const yhqList = ref([
      {
        id: 1,
        img: "~@/assets/yhq-imgs/icon01.png",
        title: "满减券",
        title2: "如:满1400-100",
      },
      {
        id: 2,
        img: "~@/assets/yhq-imgs/icon02.png",
        title: "折扣券",
        title2: "如:满1600打九折",
      },
      {
        id: 3,
        img: "~@/assets/yhq-imgs/icon03.png",
        title: "随机金额券",
        title2: "如:随机获得金额券",
      },
      {
        id: 4,
        img: "~@/assets/yhq-imgs/icon04.png",
        title: "商品兑换券",
        title2: "如:兑换指定商品",
      },
    ]);
    const router = useRouter();

    // 跳转到优惠券页面
    const handelPush = () => {
      router.push("/home/cxgl/yhqtz");
    };
    const AddList = ref([]);
    // 分页
    const page = ref(1);
    const size = ref(7);

    // 分页函数
    const fn = async (index: number) => {
      page.value = index;
      const YhList: any = await Mock.YhData({
        page: page.value,
        size: size.value,
      });
      AddList.value = YhList.result;
    };

    onMounted(async () => {
      const YhList: any = await Mock.YhData({
        page: page.value,
        size: size.value,
      });

      AddList.value = YhList.result;
    });
    return {
      // 页面跳转方法
      handelPush,
      // 分页请求数据方法
      fn,
      AddList,
      //优惠券数据
      yhqList,
    };
  },
};
</script>

<style lang="less" scoped>
// 优惠券页面的分页
.pageSmall {
  margin-top: 10px;
  float: right;
}

// 隔行变色
.active1 {
  background-color: #f5f5f5;
}

.active2 {
  background-color: #ffffff;
}

// 下面数据渲染标题
.bottom2 .title {
  text-indent: 15px;
  width: 100%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: #fff;
  background-color: #341a76;
  .num {
    width: 100px;
  }
  .user {
    width: 100px;
  }
  .city {
    width: 130px;
  }
  .sq {
    width: 130px;
  }
  .dz {
    width: 130px;
  }
  .timer {
    width: 130px;
  }
  .siz {
    width: 80px;
  }
}

// 下面数据渲染
.bottom2 .title2 {
  text-indent: 15px;
  margin-top: 5px;
  width: 100%;
  height: 25px;
  display: inline-flex;
  align-items: center;
  font-family: SourceHanSansSC-Regular;
  color: black;

  .num {
    width: 100px;
  }
  .user {
    width: 100px;
  }
  .Mjq {
    width: 120px;
  }
  .sq {
    width: 150px;
  }
  .dz {
    width: 150px;
  }
  .time {
    width: 135px;
  }
  .siz {
    width: 114px;
  }
  .XianJ {
    width: 75px;
  }
  .num2 {
    width: 200px;
  }
}

//查询行样式
.You {
  display: flex;
  justify-content: flex-start;
  label {
    font-size: 16px;
    color: #555656;
    margin-right: 15px;
    font-weight: 600;
  }
  input {
    width: 150px;
    height: 25px;
    background: #eeeeee;
    border: 0;
    margin-right: 25px;
    border-radius: 5px;
    color: #999999;
    padding-left: 5px;
  }
  button {
    width: 70px;
    height: 30px;
    background: #5f4e72;
    border-radius: 4px;
    color: white;
    border: 0;
    margin-right: 15px;
  }
  button:first-of-type {
    margin-left: 50px;
    // background: #e96c06;
  }
}
//四个element自定义样式
.grid-content {
  height: 100px;
  margin-top: 20px;
  height: 215px;
  border-radius: 30px;

  //内容样式
  .center {
    text-align: center;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    p {
      height: 40px;
    }
    .IconP {
      width: 100%;
      // height: 45px;
      // background: red;

      img {
        height: 100%;
        //图片和文字居中对齐
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
      }
      span {
        font-size: 30px;
        color: white;
        margin-left: 15px;
        //图片和文字居中对齐
        display: inline-block;
        box-sizing: border-box;
        vertical-align: middle;
      }
    }
    .P2 {
      font-size: 14px;
      color: white;
      // margin-top: 20px;
      margin: 20px 0 10px;
    }
    button {
      width: 140px;
      height: 60px;
      background: #ffffff;
      border-radius: 10px;
      border: 0;
      font-size: 15px;
      color: #5f4e72;
    }
  }
}

//element自带样式

.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.bg-purple {
  background: #5f4e72;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
